<template>
    <div class="assetDetail" >
        <!-- 头部面包屑 -->
        <headerBreadcrumb :breadcrumbItem='breadcrumbItem'/>
        <!-- 详细信息 -->
        <el-row >
            <el-col :span="6" v-for='(item,index) in list' :key='index'>
                <div class="grid">
                    <span class="name">{{item.name}}</span>
                    <span class="value">{{item.value}}</span>
                </div>
            </el-col>
        </el-row>
        <!-- 操作table -->
        <div class="content" style="margin-bottom:10px">
            <tab-vue :tabArr="tabArr" :curTabIndex="curTabIndex" @getCurTabIndexFn="getCurTabIndexFn"/>
            <div class="tableBody">
                <lpj-table-vue :baseNum='0' ref="lpjTable" :tableData="tableData" :tableHeaderData="tableHeaderData[curTabIndex]"  ></lpj-table-vue>
            </div>
        </div>
        <!--资产图片  -->
        <div class="content">
            <tab-vue :tabArr="tabArr1" :curTabIndex="0" />
            <div class="tableBody">
                <img  width="104px"  height="104px" style="margin:0 18px 10px 0" v-for='(item,index) in imglist' :key='index' :src="item.image_url" alt="">
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import headerBreadcrumb from '@/components/headerBreadcrumb'
import constObj from '@/config/const' /**表头常数 */
import LpjTableVue from "@/components/LpjTableVue"
import TabVue from "@/components/TabVue"
import {getAssetsInfoApi,getEeturnInfoRecord,getReceiceInfoRecord,getLossInfoRecord,getRepairInfoRecord,getTransferInfoRecord} from './api'
export default {
    name:"assetDetail",
    components:{headerBreadcrumb,TabVue,LpjTableVue},
    data(){
        return {
            breadcrumbItem:[{name:'资产管理'},{name:'资产详情'},],
            imglist:[],
            list:[
                {name:'资产名称：',value:''},{name:'资产编码：',value:''},{name:'资产分类：',value:''},{name:'计量单位：',value:''},
                {name:'选择仓库：',value:''},{name:'单价：',value:''},{name:'来源：',value:''},{name:'品牌名称：',value:''},
                {name:'采购时间：',value:''},{name:'入库时间：',value:''},{name:'型号：',value:''},{name:'保修年限：',value:''},
                {name:'采购人：',value:''},{name:'使用年限：',value:''},{name:'状态：',value:''},

            ],
            tabArr1:[{ label: '资产图片' }],
            tabArr: [{ label: '领用记录' },{ label: '转移记录' },{ label: '退还记录' },{ label: '维修记录' },{ label: '报失记录' }],
            /*当前选中的 tab下标*/
            curTabIndex:0,
            tableData:[],
            /**操作列表表头数据 */
            tableHeaderData:JSON.parse(JSON.stringify(constObj.tableHeaderOfAssetDetail)) ,
        }
    },
    created(){
        if(this.$route.query.name=='盘点任务明细'){
             this.breadcrumbItem = [{name:'建盘点任务'},{name:'盘点任务明细'},{name:'资产详情'},]
        }else{
            this.breadcrumbItem[0].name = this.$route.query.name
        }
        this.getData()
        this.getRecord()
    },
    methods:{
        /*tab切换 */
        getCurTabIndexFn(i){
            this.curTabIndex=i;
            this.getRecord()
        },
        /**获取资产操作记录 */
        getRecord(){
            let promise
            let param = {id:this.$route.query.id}
            switch(this.curTabIndex){
                case 0:promise=getReceiceInfoRecord(param);break; /**领用 */
                case 1:promise=getTransferInfoRecord(param);break; /**转移 */
                case 2:promise=getEeturnInfoRecord(param);break; /**退还 */
                case 3:promise=getRepairInfoRecord(param);break; /**维修 */
                case 4:promise=getLossInfoRecord(param);break; /**报失 */
            }
            promise.then(res=>{
                log(res)
                this.tableData = res
            })
        },
        /**获取资产详情 */
        getData(){
            getAssetsInfoApi({id:this.$route.query.id}).then(res=>{
                this.breadcrumbItem[1].name = res.f_name+'资产详情'
                let arr =  ['f_name','f_code','category_name','f_unit','wh_name','f_unit_price','f_supplier','f_brand','f_purchase_date','f_storage_date','f_specs','f_guarantee_years','f_purchase_name','f_use_years','f_status',]
                arr.forEach((item,index)=>{
                    this.list[index].value = res[item]
                })
                this.imglist = res.image
           })
        }
    }
}
</script>

<style lang='stylus'> 
.assetDetail
    .el-row
        background-color #fff
        padding 30px 10px 6px 10px
        margin-bottom 10px
        .el-col
            margin-bottom 20px
            line-height : 18px;
            font-size: 12px;
            .name
                color: rgba(16, 16, 16, 1);
                text-align: right;
                display inline-block
                width 100px
            .value 
                color: rgba(111, 111, 111, 1);
                font-size: 12px;
    .content
        background-color #fff
        padding 24px 40px
        .tableBody
            padding 20px 0 0 0
</style>
